$(function () {


    var indexAdd = null;
    // layui.use('form', function() {
    var form = layui.form;
    var layer = layui.layer;
    var laypage = layui.laypage;


    layui.form.on('select(test)', function (data) {
        //data.value是得到被选中的option的value值
        console.log(data);
        const selectVal = data.value;

        if (selectVal === '0') {
            $('.layui-form-item-text').show()
            $('.layui-form-item-img').hide()
        } else if (selectVal === '1') {
            $('.layui-form-item-img').show()
            $('.layui-form-item-text').hide()
        }
    });

    var form = layui.form;
    var layer = layui.layer;

    // 全局的请求参数
    var fy = {
        act: 'getlist',
        type: 1,
        start: 1,
        pagesize: 5
    }

    var obj = { page: 1, limit: 10 }


    initArtCateList()
    // 获取数据
    function initArtCateList() {

        // 文字渲染
        $.ajax({
            method: 'get',
            // type: '2',
            url: '/ydd_link/list?type=1',
            data: obj,
            success: function (res) {
                console.log(res);
                var htmlStr = template('tpl-table', res.data);
                // console.log(htmlStr);
                $('#articleLink').html(htmlStr)
                renderPage1(res.data.count)

            }
        })
        //  图片渲染
        $.ajax({
            method: 'get',
            // type: '2',
            url: `/ydd_link/list?type=2`,
            data: obj,
            success: function (res) {
                console.log(res);
                var hemlStr = template('tpl-table-img', res.data);
                $('#imageLink').html(hemlStr)
                // console.log(hemlStr);
                renderPage(res.data.count)
            }
        })
    };



    // 渲染分页
    function renderPage1(total) {
        console.log(total);
        // 使用laypage.render()来渲染分页
        laypage.render({
            elem: 'fenye1',//分页容器的id
            count: total,//总数据的个数
            limit: obj.limit,//一页显示几条数据
            curr: obj.page,//默认显示的页码
            //定义每页条数的选择项
            limits: [10, 20, 30, 40],
            // 定义分页器中的组件
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 分页切换时会触发,render方法被调用也会触发jump
            // 里面有一个布尔值得参数first,如果是自动加载触发则是true
            // 如果是点击分页器触发则是undefined,
            jump: function (page, first) {
                // console.log(page.curr);
                obj.page = page.curr
                // 赋值完成后需要再次调用initTable()方法
                //直接调用会造成程序的死循环,因为initTable()中调用了renderPage()方法
                // 当一条显示的最新的数据重新赋值给obj.pagesize
                obj.limit = page.limit
                if (!first) {
                    // 通过点击分页器,则对文章列表进行重新渲染
                    initArtCateList()
                }
            }
        })

    }


    // 渲染分页2
    function renderPage(total) {
        console.log(total);
        // 使用laypage.render()来渲染分页
        laypage.render({
            elem: 'fenye2',//分页容器的id
            count: total,//总数据的个数
            limit: obj.limit,//一页显示几条数据
            curr: obj.page,//默认显示的页码
            //定义每页条数的选择项
            limits: [10, 20, 30, 40],
            // 定义分页器中的组件
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 分页切换时会触发,render方法被调用也会触发jump
            // 里面有一个布尔值得参数first,如果是自动加载触发则是true
            // 如果是点击分页器触发则是undefined,
            jump: function (page, first) {
                // console.log(page.curr);
                obj.page = page.curr
                // 赋值完成后需要再次调用initTable()方法
                //直接调用会造成程序的死循环,因为initTable()中调用了renderPage()方法
                // 当一条显示的最新的数据重新赋值给obj.pagesize
                obj.limit = page.limit
                if (!first) {
                    // 通过点击分页器,则对文章列表进行重新渲染
                    initArtCateList()
                }
            }
        })

    }










    // 通过代理的形式，为删除按钮绑定点击事件处理函数
    $('tbody').on('click', '#BtnDelete', function () {
        console.log(1);
        // 获取删除按钮的个数
        var len = $('.btn-delete').length
        // console.log(len)
        // 获取到文章的 id
        var id = $(this).attr('data-id')
        console.log(id);
        // 询问用户是否要删除数据
        layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/ydd_link/del? id=?',
                data: {
                    id
                },
                success: function (res) {
                    console.log(res);
                    if (res.errno !== 0) {
                        return layer.msg('删除文章失败！')
                    }
                    layer.msg('删除文章成功！')

                    // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
                    // 如果没有剩余的数据了,则让页码值 -1 之后,
                    // 再重新调用 initTable 方法
                    // 4
                    if (len === 1) {
                        // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
                        // 页码值最小必须是 1
                        obj.pagenum = obj.pagenum === 1 ? 1 : obj.pagenum - 1
                    }

                    initArtCateList()
                    layer.close(index);
                }

            })


        });
    })









    // 点击添加
    addList()
    function addList() {
        var indexAdd = null

        $('#eddd').on('click', () => {
            // 弹出新增文章分类
            indexAdd = layer.open({
                type: 1,
                title: ['添加友情链接', 'font-size:18px'],
                area: ['550px', '350px'],
                content: $('#dilog-add').html()

            })
            $('.layui-form-item-img').hide()
            layui.form.render()

            layui.form.on('select', function (data) {
                const selectVal = data.value //得到被选中的值
                if (selectVal === '1') {
                    $('.layui-form-item-text').show()
                    $('.layui-form-item-img').hide()

                } else if (selectVal === '2') {
                    $('.layui-form-item-img').show()
                    $('.layui-form-item-text').hide()
                }
            });
            $('#filebtn').on('click', () => {
                $('#addd').click()

            })

            var file = null
            // 获取文件在服务器的地址
            var img = null
            $('body').on('change', '#addd', function (e) {
                console.log(1);
                var fileList = e.target.files
                console.log(fileList);

                if (fileList.length === 0) {
                    return file = null
                }
                // 根据文件，创建对应的 URL 地址
                var newImgURL = URL.createObjectURL(fileList[0])

                $('#image').attr('src', newImgURL)
                file = fileList[0]

                var fd = new FormData()
                fd.append('file', file)
                // 发送请求将图片上传到服务器
                $.ajax({
                    method: 'POST',
                    url: '/common/upload?type=images',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        if (res.errno !== 0) return layui.layer.msg('上传图片失败!');
                        setTimeout(function () {
                            layui.layer.msg('图片上传成功!');
                            img = res.data.savePath
                        }, 1000)
                    }
                })
                // console.log(icon);
            })
            $('#form-add').on('submit', function (e) {
                e.stopPropagation()

                var type = $('#form-add').serializeArray().filter(e => e.name === 'type')[0].value
                var str = ''
                if (type === '2') {
                    str = '&img=' + img
                }
                // var formData = formData + '&img=' + $('#file').val()
                console.log($('#form-add').serialize());
                $.ajax({
                    method: 'POST',
                    url: '/ydd_link/add',
                    data: $('#form-add').serialize() + str,
                    success: (res) => {
                        if (res.errno !== 0) return layui.layer.msg('添加友情链接失败！')
                        layui.layer.msg('添加友情链接成功！')
                        // getList()
                    }
                })
            })
        })
    }


    $('tbody').on('click', '#BtnEdit', function () {
        var id = {
            id: $(this).attr('data-id')
        }
        console.log(id);
        $('#idinfo').on('submit', function (e) {
            let data = {
                type: $('#idinfo [name=type]').val(),
                title: $('#idinfo  [name=title]').val(),
                url: $('#idinfo  [name=url]').val(),
                des: $('#idinfo  [name=des]').val(),
                img: $('#idinfo  [name=img]').val(),

            }
            console.log(data);
            // console.log($(this).serialize());
            e.preventDefault()

            $.ajax({
                method: 'POST',
                url: '/ydd_link/update',
                data: {
                    ...id, ...data
                },
                success: function (res) {
                    console.log(res);
                    if (res.errno !== 0) {
                        return layer.msg('更新分类数据失败')
                    }
                    layer.msg('更新分类数据成功')
                    layer.close(indexEdit)



                }



            })

            $('.article1').hide()

            initArtCateList()

        })
        console.log('ok');
        $('#dilog-add1').show()


    })


    // 点击编辑
    addList1()
    function addList1() {
        var indexAdd = null

        // $('tbody').on('click', '#BtnEdit', () => {
        //     // console.log(11);
        //     // 弹出编辑文章分类
        //     var id = $(this);
        //     console.log(id);
        //     var title = $(this).title;
        //     console.log(title);
        //     indexAdd = layer.open({
        //         type: 1,
        //         title: ['添加友情链接', 'font-size:18px'],
        //         area: ['550px', '350px'],
        //         content: $('#dilog-add1').html()

        //     })
        //     $('.layui-form-item-img').hide()

        //     layui.form.render()

        //     layui.form.on('select', function (data) {
        //         const selectVal = data.value //得到被选中的值
        //         if (selectVal === '1') {
        //             $('.layui-form-item-text').show()
        //             $('.layui-form-item-img').hide()

        //         } else if (selectVal === '2') {
        //             $('.layui-form-item-img').show()
        //             $('.layui-form-item-text').hide()
        //         }
        //     });
        //     $('#filebtn').on('click', () => {
        //         $('#file').click()

        //     })


        //     //发起请求获取对应的数据
        //     $.ajax({
        //         method: 'GET',
        //         url: '/ydd_link/rowInfo',
        //         data: {
        //             id: id,
        //             act: 'edit',
        //             type: 1,
        //             title: title,
        //             des: des
        //         },
        //         success: function (res) {
        //             console.log(res);
        //             form.val('form-edit', res.data)
        //         }
        //     })

        // })
        $('tbody').on('click', '#BtnEdit', function () {
            // console.log(1);
            // 获取删除按钮的个数
            // var len = $('.btn-delete').length
            // console.log(len)
            // 获取到文章的 id
            var id = $(this).attr('data-id')
            console.log(id);
            indexAdd = layer.open({
                type: 1,
                title: ['添加友情链接', 'font-size:18px'],
                area: ['550px', '350px'],
                content: $('#dilog-add1').html()

            })
            $('.layui-form-item-img').hide()

            layui.form.render()

            layui.form.on('select', function (data) {
                const selectVal = data.value //得到被选中的值
                if (selectVal === '1') {
                    $('.layui-form-item-text').show()
                    $('.layui-form-item-img').hide()

                } else if (selectVal === '2') {
                    $('.layui-form-item-img').show()
                    $('.layui-form-item-text').hide()
                }
            });
            $('#filebtn').on('click', () => {
                $('#file').click()

            })


            //发起请求获取对应的数据
            $.ajax({
                method: 'GET',
                url: '/ydd_link/rowInfo',
                data: {
                    id
                },
                success: function (res) {
                    console.log(res);
                    form.val('idinfo', res.data)
                }

            })
        })

    }

    // 通过事件委托的方式 为编辑的表单添加 submit 事件
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/ydd_link/update',
            data: $(this).serialize(),
            success: function (res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg('更新分类数据失败')
                }
                layer.msg('更新分类数据成功')
                layer.close(indexEdit)
                initArtCateList()
            }
        })
    })









})